<template>
  <div>
    <!-- 限时活动 -->
    <el-card shadow="never" class="margin-30" :body-style="{ padding: '20px' }">
      <div slot="header">
        <el-button type="primary" size="mini" @click="doAddBtn">新增</el-button>
      </div>
      <el-table :data="list" border stripe>
        <el-table-column label="序号" type="index" width="50" align="center" />
        <el-table-column label="商品图片" width="150" align="center">
          <template slot-scope="scope">
            <el-image :src="scope.row.pic" style="width: 100px; height: 100px;" />
          </template>
        </el-table-column>
        <el-table-column label="活动时间" width="300" align="center">
          <template slot-scope="scope">
            <div>开始时间: {{ scope.row.promotionStartTime }}</div>
            <div>结束时间: {{ scope.row.promotionEndTime }}</div>
          </template>
        </el-table-column>
        <el-table-column label="是否过期" width="150" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.publishStatus === 1" type="success" size="small">否</el-tag>
            <el-tag v-if="scope.row.publishStatus === 0" type="success" size="small">是</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="productCategoryName" width="150" align="center" />
        <el-table-column label="品牌名称" prop="brandName" width="150" align="center" />
        <el-table-column label="商品价格" prop="price" width="150" align="center" />
        <el-table-column label="商品类别" prop="productSn" width="150" align="center" />
        <el-table-column label="创建时间" prop="createTime" width="150" align="center" />
        <el-table-column label="操作" prop="" width="150" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="doDel(scope.row.id)">删除</el-button>

          </template>
        </el-table-column>
      </el-table>

    </el-card>
    <el-dialog
      title="热销详情"
      :visible.sync="dialogVisible"
      width="80%"
      top="5vh"
    >

      <el-card shadow="never" class="margin-30" :body-style="{ padding: '20px' }">
        <div slot="header">
          <span>条件查询</span>
        </div>
        <el-form ref="productListForm" :model="searchProductForm" label-width="100px" size="mini">
          <el-row :gutter="20">
            <el-col :span="5" :offset="0">
              <el-input v-model="searchProductForm.name" size="mini" placeholder="商品名称" />
            </el-col>
            <el-col :span="5" :offset="0">
              <el-input v-model="searchProductForm.productSn" size="mini" placeholder="商品货号" />
            </el-col>
            <el-col :span="3" :offset="0">
              <el-select v-model="searchProductForm.brandId" size="mini" clearable placeholder="品牌名称">
                <el-option v-for="item in BrandList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-col>
            <el-col :span="3" :offset="0">
              <el-select v-model="searchProductForm.publishStatus" size="mini" clearable placeholder="上架状态">
                <el-option label="上架" :value="1" />
                <el-option label="下架" :value="0" />
              </el-select>
            </el-col>
            <el-col :span="3" :offset="0">
              <el-select v-model="searchProductForm.verifyStatus" size="mini" clearable placeholder="审核状态">
                <el-option label="审核通过" :value="1" />
                <el-option label="未审核" :value="0" />
              </el-select>
            </el-col>
            <el-col :span="1" style="margin-right: 30px;" :offset="1">
              <el-button size="mini" @click="getResetProductList">重置</el-button>
            </el-col>
            <el-col :span="1" :offset="0">
              <el-button size="mini" type="primary" @click="getSerchProduct">搜索</el-button>
            </el-col>
          </el-row>

          <!-- 按钮 -->

        </el-form>
      </el-card>

      <div style="width: 100%; height: 350px;  overflow: auto;">
        <el-card shadow="never" :body-style="{ padding: '20px' }">
          <div slot="header">
            <span>商品列表</span>
          </div>

          <el-table
            :data="productList"
            border
            stripe
          >
            <el-table-column
              label="#"
              type="index"
              width="50"
              align="center"
              fixed="left"
            />
            <el-table-column
              label="选择"
              width="100"
              align="center"
            >
              <template slot-scope="scope">
                <el-radio v-model="radio" :label="scope.row">{{ }}</el-radio>
              </template>
            </el-table-column>
            <el-table-column
              prop="选择"
              label="商品图片"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                <el-image style="width: 100px; height: 100px;" :src="scope.row.pic" />
              </template>

            </el-table-column>
            <el-table-column
              prop="productCategoryName"
              label="商品名称"
              align="center"
            >
              <template slot-scope="scope">
                <div> {{ scope.row.name }}</div>
                <div>品牌 {{ scope.row.brandName }}</div>
                <div>{{ scope.row.description }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="商品价格"
              width="200"
            >
              <template slot-scope="scope">
                <div>原价: {{ scope.row.originalPrice }}</div>
                <div>现价: {{ scope.row.price }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="productCategoryId "
              label="商品类别"
              width="150"
              align="center"
            />
            <el-table-column
              prop="lowStock"
              label="商品重量"
              width="100"
              align="center"
              fixed="right"
            />
          </el-table>
          <!-- 分页 -->
          <el-pagination
            style="margin-top: 30px; text-align: center;"
            :current-page="start"
            :page-sizes="[10, 20, 30]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-card>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 添加限时活动 -->
    <el-dialog
      title="编辑限时活动"
      :visible.sync="dialogVisible1"
      width="50%"
    >
      <el-card shadow="never" :body-style="{ padding: '20px' }">
        <el-form ref="RecommengForm" :model="addRecommendItem" label-width="100px" size="size">
          <el-row :gutter="20">
            <el-col :span="10" :offset="0">
              <el-form-item label="商品原价">
                {{ addRecommendItem.price }}
              </el-form-item>
            </el-col>
            <el-col :span="10" :offset="0">
              <el-form-item label="商品名称">
                {{ addRecommendItem.name }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="10" :offset="0">
              <el-form-item label="促销价格">
                <el-input-number v-model="addRecommendItem.promotionPrice " :min="0" />
              </el-form-item>
            </el-col>
            <el-col :span="10" :offset="0">
              <el-form-item label="排序">
                <el-input-number v-model="addRecommendItem.sort" :min="0" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="10" :offset="0">
              <el-form-item label="开始时间">
                <div class="block">
                  <el-date-picker
                    v-model="addRecommendItem.promotionStartTime "
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择日期"
                  />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="10" :offset="0">
              <el-form-item label="结束时间">
                <div class="block">
                  <!-- "2023-08-11 16:10:29" -->
                  <el-date-picker
                    v-model="addRecommendItem.promotionEndTime "
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择日期"
                  />
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="10" :offset="0">
              <el-form-item label="活动限购数量">
                <el-input v-model="addRecommendItem.promotionPerLimit " size="size" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="10" :offset="0">
              <el-form-item label="商品图片">
                <el-image style="width: 100px; height: 100px;" :src="addRecommendItem.pic" />

              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

      </el-card>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="doAddRecommend">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import mix from '@/mixins'
import { findAllRecommends, delRecommend, addRecommend } from '@/api/rceommend'
import { productsByPage } from '@/api/product'

export default {
  name: 'Activity',
  mixins: [mix],
  data() {
    return {
      list: [], // 活动列表
      dialogVisible: false,
      dialogVisible1: false,
      recommend: {},
      rules: {},
      productList: [],
      searchProductForm: {},
      radio: '',
      addRecommendItem: {} // 新增活动的数据
      // addRecommengForm: []
    }
  },

  watch: {
    radio(newVal) {
      // this.gerHomeRecommend(newVal)
      this.dialogVisible1 = true
      console.log(newVal)
      this.addRecommendItem.brandName = newVal.brandName
      this.addRecommendItem.name = newVal.name
      this.addRecommendItem.pic = newVal.pic
      this.addRecommendItem.price = newVal.price
      this.addRecommendItem.productId = newVal.id
      this.addRecommendItem.publishStatus = newVal.publishStatus
      this.addRecommendItem.productSn = newVal.productSn
      this.addRecommendItem.type = 0
    },
    dialogVisible() {
      this.getProductList()
    }
  },
  created() {
    this.getBrandList()
    this.getfindAllRecommends()
    this.getProductList()
  },

  mounted() {

  },

  methods: {
    // 点击打开商品明细
    doAddBtn() {
      this.dialogVisible = true
    },

    // 新增活动
    async doAddRecommend() {
      const res = await addRecommend(this.addRecommendItem)
      const { success } = res
      if (success) {
        this.$message.success('添加成功')
      } else {
        this.$message.erroe('添加失败,请重试')
      }
      this.dialogVisible1 = false
      this.radio = ''
    },

    // 获取活动明细
    // async geraddRecommend(id) {
    //   const res = await addRecommend(id)
    //   console.log(res)
    // },

    // 重置
    getResetProductList() {
      this.searchProductForm = {}
      this.getProductList()
    },

    // 搜索
    getSerchProduct() {
      this.getProductList()
    },

    // 获取商品列表
    async getProductList() {
      const res = await productsByPage(this.start, this.limit, this.searchProductForm)
      console.log(res)
      const { success, message, data: { rows, total }} = res
      if (success) {
        this.productList = rows
        this.total = total
      } else {
        this.$message.error(message)
      }
    },
    // 分页
    handleSizeChange(val) {
      this.limit = val
      this.start = 1
      this.getProductList()
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.start = val
      this.getProductList()
      // console.log(`当前页: ${val}`);
    },

    // 删除活动列表
    doDel(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await delRecommend(id)
        const { success } = res
        if (success) {
          this.getfindAllRecommends()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 获取活动列表
    async getfindAllRecommends() {
      const res = await findAllRecommends()
      console.log(res)
      const { data: { items }, success } = res
      if (success) {
        this.list = items
      } else {
        this.$message.error('获取失败,请刷新后重试')
      }
    }

  }
}
</script>

<style lang="scss" scoped></style>
